<template>
  <div class="btn-right">
    <a-button type="" @click="init()"> 刷新 </a-button>
    <a-button class="ml-6" type="primary" @click="handleCreate()"> 去付款 </a-button>
  </div>
  <div v-if="true" class="px-6 py-9">
    <FormTitle text="材料费用" />
    <div class="content mt-3">
      <a-descriptions :column="3">
        <a-descriptions-item label="付款时间">
          {{ userData[0]?.contractorName || '' }}
        </a-descriptions-item>
        <a-descriptions-item label="实付金额">
          {{ userData[0]?.contractorAddress || '' }}
        </a-descriptions-item>
        <a-descriptions-item label="应付金额">
          {{ userData[0]?.contractorHead || '' }}
        </a-descriptions-item>
        <!-- <a-descriptions-item label="手机号码">
          {{ userData[0]?.contractorHeadPhone || '' }}
        </a-descriptions-item> -->
      </a-descriptions>
    </div>
    <FormTitle text="施工费用" />
    <a-descriptions :column="3" class="mt-2">
      <a-descriptions-item label="付款时间">
        {{ userData[0]?.contractorIntroduction || '' }}
      </a-descriptions-item>
      <a-descriptions-item label="实付金额">
        {{ userData[0]?.contractorIntroduction || '' }}
      </a-descriptions-item>
      <a-descriptions-item label="应付金额">
        {{ userData[0]?.contractorIntroduction || '' }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
  <div
    style="
      width: 100%;
      /* height: 100%; */
      height: 350px;
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
    "
  >
    <div>
      <Empty v-if="false" />
      <!-- <a-button type="primary" @click="handleCreate">+ 添加承建商</a-button> -->
    </div>
    <PaymentRecordSub :projectId="1" @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import PaymentRecordSub from './PaymentRecordSub.vue';
  import { Empty, Descriptions } from 'ant-design-vue';
  import { defineComponent, ref, onBeforeMount } from 'vue';
  import FormTitle from '../components/FormTitle.vue';
  // import { useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  // import { columns } from './design.data';
  import { getContractorInfoListApi } from '/@/api/zkrq/projectManagement';
  export default defineComponent({
    name: 'PaymentRecord',
    components: {
      Empty,
      PaymentRecordSub,
      FormTitle,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const [registerModal, { openModal }] = useModal();
      let setData;
      const userData = ref<any>([]);
      onBeforeMount(() => {
        init();
      });
      async function init() {
        const ret = await await getContractorInfoListApi({ projectId: 1 });
        console.log('ret1:', ret);
        setData = [ret];
        userData.value = setData;
      }
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleSuccess() {
        // reload();
      }
      return {
        registerModal,
        handleCreate,
        handleSuccess,
        userData,
        init,
      };
    },
  });
</script>

<style lang="less" scoped>
  .btn-right {
    // margin-right: 25px;
    margin-right: 35px;
    float: right;
  }
</style>
